<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view class="background-view-image">
					<u-swiper @click="handleDetail" keyName="content" imgMode="scaleToFill" height="240rpx"
						:list="bannerList" indicator indicatorMode="line" circular radius="24rpx"></u-swiper>
				</view>
				<view class="head_text" v-if="classInfo.contentInfo">
					<u-read-more :toggle="true" showHeight="170rpx" color="#19E820" :shadowStyle="shadowStyle">
						<rich-text style="color: #000000" :nodes="classInfo.contentInfo"></rich-text>
					</u-read-more>
				</view>
				<view class="text_item">
					<view class="tetx_btn" @click="handleView">查看</view>
				</view>
				<view class="list_wrap" v-if="dataList.length > 0">
					<scroll-view style="height: 100%" :scroll-y="true" @scrolltolower="handleScroll">
						<view @tap="goDetail(item)" v-for="(item, index) in dataList" :key="index" class="item_card">
							<image class="item_image" mode="aspectFill" :src="item.fileListPic[0].fileUrl"></image>
							<view class="item_right">
								<view class="item_info">
									{{ item.title }}
								</view>
								<view class="two">{{ item.contentInfo }}</view>
								<view class="three">
									<view class="time">
										<image class="date_image" src="../../static/images/time.png"></image>
										{{ item.pubTime }}
									</view>
								</view>
								<view class="fo">
									<view class="th">
										<image class="date_image" src="../../static/images/view.png"></image>
										<view class="date">{{ item.viewCount }}</view>
									</view>
									<view class="th">
										<image class="date_image" src="../../static/images/message.png"></image>
										<view class="date">{{ item.commentCount }}</view>
									</view>
									<view @tap.stop="handleCollect(item, index)" class="th">
										<image v-if="item.likeFlag == 0" class="date_image"
											src="../../static/images/collect.png"></image>
										<image v-else class="date_image" src="../../static/images/like1.png"></image>
										<view class="date">{{ item.likeCount }}</view>
									</view>
									<view class="th four">
										<image class="b-img" src="../../static/images/zhaunfa.png"></image>
										<button class="share-btn" @tap="handShareCountAdd(item, index)"
											open-type="share" @tap.stop>
											分享{{ item.shareCount == null ? 0 : item.shareCount }}
										</button>
									</view>
								</view>
							</view>
						</view>
						<uni-load-more :status="status"></uni-load-more>
					</scroll-view>
				</view>
				<u-empty v-else mode="list"></u-empty>
				<view style="height: 36rpx"></view>
			</view>
		</view>
	</view>
</template>
<script>
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	import {
		mapState
	} from 'vuex'; // 关键导入
	const api = require('../../util/api.js');
	export default {
		components: {
			CustomNavbarTwo
		},
		data() {
			return {
				status: 'more',
				pageNum: 1,
				pageSize: 10,
				total: 0,
				classInfo: {},
				bannerList: [],
				shareTile: '',
				dataList: [],
				shadowStyle: {
					backgroundImage: 'none',
					paddingTop: '0',
					marginTop: '20rpx'
				},
				fenxiangList: [],
				pageTitle: '推荐纸厂采购专区',
				showSex: false,
				content: '分享会介绍：经过上述讨论, 随机一段废话因何而发生?在这种不可避免的冲突下，我们必须解决这个问题德国曾经提到过, 只有在人群中间，才能认识自己。这启发了我. 总结的来说, 一般来讲,我们都必须务必慎重的考虑考虑. 总结的来说, 带着这些问题, 我们来审视一下随机一段废话. 既然如何, 生活中, 若 '
			};
		},
		onLoad() {
			this.getList();
			this.getDataList();
			this.getBannerList();
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: this.shareTile, //分享的名称
				path: '/pages/feisuxuetang/index',
				mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
			};
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '找纸塑网一废纸废塑料AI获客平台', //分享的名称
				path: '/pages/feisuxuetang/index',
				mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
			};
		},
		computed: {
			...mapState(['userInfo', 'pubInfoUserInfo'])
		},
		methods: {
			//点击轮播图
			handleDetail(e) {
				console.log(e, 666);
				if (this.bannerList[e].clickUrl) {
					uni.navigateTo({
						url: `/page/detail/index?id=${this.bannerList[e].clickUrl}`
					});
				}
			},
			//增加分享次数
			handShareCountAdd(item, index) {
				this.shareTile = item.title;
				this.$https.post(this.$api.getShareCountAdd, {
					courseDetailId: item.id
				}).then((res) => {
					if (res.code === 200) {
						this.dataList[index].shareCount++;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//查看介绍
			handleView() {
				uni.navigateTo({
					url: `/page/introDetail/index?id=` + this.classInfo.id
				});
			},
			//获取轮播图
			getBannerList() {
				this.$https.post(this.$api.getBannerList, {
					bannerType: '15'
				}).then((res) => {
					if (res.code === 200) {
						this.bannerList = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//点赞
			handleCollect(item, index) {
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				this.$https.post(this.$api.getCourseLike, {
					pubInfoId: item.id,
					operateType: 3,
					processType: item.likeFlag == 0 ? 1 : 0
				}).then((res) => {
					if (res.code === 200) {
						if (item.likeFlag == 0) {
							this.dataList[index].likeFlag = '1';
							this.dataList[index].likeCount++;
						} else {
							this.dataList[index].likeFlag = '0';
							this.dataList[index].likeCount--;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//获取简介
			getList() {
				this.$https.post(this.$api.getCourseInfo, {
					resourceType: 6
				}).then((res) => {
					if (res.code === 200) {
						console.log(res);
						this.classInfo = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//滚动
			handleScroll(e) {
				if (this.status == 'no-more') {
					return;
				} else {
					this.status = 'loading';
					this.pageNum++;
					this.getDataList();
				}
			},
			//获取课堂列表
			getDataList() {
				this.$https.post(this.$api.getClassList, {
					resourceType: 6,
					pageNum: this.pageNum,
					pageSize: 10
				}).then((res) => {
					if (res.code === 200) {
						console.log(res);
						this.total = res.total;
						this.dataList = [...this.dataList, ...res.data];
						if (res.data.length == 0 || res.total <= 10) {
							this.status = 'no-more';
						} else {
							this.status = 'more';
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/page/feisuxuetang/detail?id=${item.id}&title=${item.title}`
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.my_container {
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.my_container_body {
			width: 750rpx;
			height: 100%;

			.my_container_body_head {
				width: 686rpx;
				height: 176rpx;
			}

			.my_container_body_body {
				width: 686rpx;
				height: calc(100% - 176rpx);
				padding-top: 20rpx;
				margin-left: 32rpx;

				.background-view-image {
					width: 686rpx;
					height: 240rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
				}

				.head_text {
					padding: 20rpx 0;
					width: 686rpx;
				}

				.text_item {
					display: flex;
					justify-content: flex-end;

					.tetx_btn {
						padding: 10rpx 40rpx;
						border-radius: 40rpx;
						background: #19e820;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #ffffff;
					}
				}

				.list_wrap {
					height: calc(100% - 416rpx);

					.item_card {
						margin-top: 20rpx;
						width: 686rpx;
						height: 312rpx;
						background: #ffffff;
						border-radius: 24rpx;
						display: flex;

						.item_image {
							width: 188rpx;
							height: 272rpx;
							border-radius: 20rpx 20rpx 20rpx 20rpx;
							margin-top: 20rpx;
							margin-left: 20rpx;
						}

						.item_right {
							margin-left: 18rpx;
							margin-top: 24rpx;
							width: 430rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-around;

							.item_info {
								height: 40rpx;
								font-weight: 550;
								font-size: 28rpx;
								color: #333333;
								line-height: 39rpx;
								text-align: left;
							}

							.two {
								font-weight: 400;
								font-size: 24rpx;
								color: #777777;
								overflow: hidden;
								/* 确保超出部分的文本会被隐藏 */
								text-overflow: ellipsis;
								/* 超出部分显示省略号 */
								display: -webkit-box;
								/* 使用弹性盒子模型 */
								-webkit-line-clamp: 2;
								/* 限制显示两行 */
								-webkit-box-orient: vertical;
								/* 垂直排列子元素 */
							}

							.three {
								display: flex;
								justify-content: space-between;
								font-size: 24rpx;
								color: #777777;

								.time {
									display: flex;
									align-items: center;

									.date_image {
										width: 36rpx;
										height: 36rpx;
										margin-top: 8.5rpx;
									}
								}

								.address {
									display: flex;
									align-items: center;

									.date_image {
										width: 36rpx;
										height: 36rpx;
										margin-top: 8.5rpx;
									}
								}
							}

							.fo {
								// width: 432rpx;
								height: 53rpx;
								line-height: 53rpx;
								display: flex;
								justify-content: space-between;

								.tr {
									height: 53rpx;
									line-height: 53rpx;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
								}

								.th {
									height: 53rpx;
									line-height: 53rpx;
									display: flex;

									.date_image {
										width: 36rpx;
										height: 36rpx;
										margin-top: 8.5rpx;
									}

									.date {
										height: 53rpx;
										font-weight: 400;
										font-size: 24rpx;
										color: #777777;
										line-height: 53rpx;
										text-align: left;
										margin-left: 10rpx;
									}
								}

								.four {
									width: 140rpx;
									position: relative;
									display: flex;
									align-items: center;

									.b-img {
										width: 40rpx;
										height: 40rpx;
									}

									.share-btn {
										width: 100%;
										text-align: left;
										background-color: transparent;
										padding-left: 40rpx;
										position: absolute;
										font-size: 22rpx;
										top: 0;
									}
								}
							}

							.btn {
								width: 156rpx;
								height: 48rpx;
								line-height: 48rpx;
								background: #19e820;
								border-radius: 100rpx 100rpx 100rpx 100rpx;
								color: #ffffff;
								text-align: center;
								font-size: 24rpx;
							}
						}
					}
				}
			}

			.none {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #575252;

				image {
					width: 50%;
				}
			}
		}
	}
</style>